<template>
  <article class="contact">
    <app-head title="联系客服"></app-head>

    <div class="contact-bg">
      <img src="@/assets/img/bg_contact.png" alt="">
      <p style="text-align:center"> 在线时间  &nbsp;{{service_time}}</p> 
    </div>

    <div class="contact-qq">
      <!--:href="`http://wpa.qq.com/msgrd?v=3&uin=${qq}&site=qq&menu=yes`"-->
      <!--"mqq://im/chat?chat_type=wpa&uin="+t+"&version=1&src_type=web";-->
      <a class="contact__item"
         :href="isMobilePhone" target="_blank">
        <img src="@/assets/img/icon_qq.png" alt="">
        <span>联系QQ:{{qq}}</span>
      </a>
    </div>

    <div class="contact-phone">
      <a class="contact__item" :href="`tel:${tel}`">
        <img src="@/assets/img/icon_phone.png" alt="">
        <span>联系电话:{{tel}}</span>
      </a>
    </div>
  </article>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    name: 'contact',
    components: {},
    data() {
      return {
        // qq:null
          qq:null,
          tel:null,
          service_time:null
      }
    },
    watch:{
      serviceInfo(val){
        if(val){
          let  { qq,tel,service_time } = val
          this.qq = qq
          this.tel =tel 
          this.service_time = service_time

        }
        console.log(val)
      }
    },
    computed: {
      ...mapGetters([
        'serviceInfo'
      ]),
      // qq() {
      //   let {qq} = this.serviceInfo
      //   if (qq) {
      //     qq = JSON.parse(qq)
      //   } else {
      //     qq = []
      //   }
      //   return qq[0]
      // },
      // tel() {
      //   let {tel} = this.serviceInfo
      //   if (tel) {
      //     tel = JSON.parse(tel)
      //   } else {
      //     tel = []
      //   }
      //   return tel[0]
      // },
      isMobilePhone() {
        if ((/(Android)/i.test(navigator.userAgent))) {
          return `mqq://im/chat?chat_type=wpa&uin=${this.qq}&version=1&src_type=web`
        } else if ((/(iphone|ipod|ipad|ios)/i.test(navigator.userAgent))) {
          return `mqq://im/chat?chat_type=wpa&uin=${this.qq}&version=1&src_type=web`
        } else {
          return `http://wpa.qq.com/msgrd?v=3&uin=${this.qq}&site=qq&menu=yes`
        }
      }
    },
    methods: {},
    created() {
      this.$store.dispatch('getServiceInfo')
    }
  }
</script>

<style scoped="scoped" lang="scss">

  .contact {

    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    &-bg {
      width: 100vw;
      position: relative;
      img {
        width: 100%;
      }
      p {
        position: absolute;
        width: 100%;
        bottom: 0.12rem;
        font-size: 0.18rem;
        color: #ffffff;
        text-align: center;
      }
    }
    &-qq, &-phone {
      align-items: center;
      display: flex;
      justify-content: center;
      width: 100%;
      text-align: center;
      height: 2rem;
      img {
        width: 0.8rem;
        margin-bottom: 0.2rem;
      }
      span {
        font-size: 0.18rem;
      }
    }

    &__item {
      align-items: center;
      justify-content: center;
      display: flex;
      flex-direction: column;
    }
  }

</style>
